<template>
  <div class="statistics-manage">
    <div class="statistics-manage__title">处室案例统计</div>
    <el-row type="flex" justify="space-between">
      <ul class="statistics-manage__menu">
        <li
          class="statistics-manage__menu-item"
          :class="{ active: index == num }"
          v-for="(item, index) in listData"
          :key="index"
          @click="switchUrl(item.src, index)"
        >
          <p>{{ formData[item.title] }}</p>
        </li>
        <!-- <li class="statistics-manage__menu-item">
          <p>复审决定总量依决定日变化趋势</p>
        </li>
        <li class="statistics-manage__menu-item">
          <p>复审决定按结论按处室领域分量</p>
        </li>
        <li class="statistics-manage__menu-item">
          <p>依据分类号复审决定总量变化趋势</p>
        </li>
        <li class="statistics-manage__menu-item">
          <p>复审无效涉及案件数</p>
        </li> -->
      </ul>
      <iframe class="statistics-manage__container" :src="toUrl"></iframe>
      <!-- <div class="statistics-manage__container">
        <div class="statistics-manage__container-title">
          <span><i class="el-icon-document"></i>另存为</span>
          <span><i class="el-icon-upload2"></i>导出</span>
          <i class="el-icon-caret-bottom"></i>
        </div>
        <div class="statistics-manage__container-content">
          <div class="statistics-manage__container-content-day">
            <span style="margin-right: 20px">决定日</span>
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="无限制"
            />

            -

            <el-date-picker
                v-model="value1"
                type="date"
                placeholder="无限制"
            />
          </div>
          <div style="font-size: 18px;font-weight: 700;text-align: center;padding-top: 10px;background: white">复审决定总量依决定日变化趋势</div>
          <div class="statistics-manage__container-content-line" ref="line"></div>
          <div class="statistics-manage__container-content-table">
            <div class="title">复审决定总量</div>
            <el-table :data="tableData" border stripe>
              <el-table-column label="年份(决定日)" width="" prop="year" header-align="center"></el-table-column>
              <el-table-column label="复审数据记录数" prop="total" header-align="center" align="right"></el-table-column>
            </el-table>
          </div>
        </div>
      </div> -->
    </el-row>
  </div>
</template>

<script>
import { departmentStatistics } from "@api/details";
import echarts from "echarts";
export default {
  name: "StatisticsManage",
  data() {
    return {
      num: 0,
      toUrl: "",
      listData: [],
      formData: {
        juedingrUrl: "复审决定总量依决定日变化趋势",
        anjianjlUrl: "复审决定按结论按处室领域分量",
        fenleihUrl: "依据分类号复审决定总量变化趋势",
        shejiajsUrl: "复审无效涉及案件数"
      }
    };
  },
  mounted() {
    this._departmentStatistics();
    // const lineChart = echarts.init(this.$refs.line);
    // lineChart.setOption(this.options)
  },
  methods: {
    switchUrl(item, index) {
      this.toUrl = item;
      this.num = index;
    },
    /* 获取我的标注data*/
    async _departmentStatistics() {
      const { code, data } = await departmentStatistics();
      console.log(data);
      if (code == 200) {
        this.listData = Object.entries(data).map(item => {
          let [key, res] = item;
          return {
            title: key,
            src: res
          };
        });
        this.toUrl = this.listData[0]["src"];
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.statistics-manage {
  width: 1200px;
  margin: 20px auto;

  &__title {
    font-size: 24px;
    color: #303133;
    font-weight: 700;
    margin: 20px 0;
  }

  &__menu {
    position: relative;
    width: 270px;
    background: white;
    border-radius: 4px;
    padding-left: 0;
    margin: 0 !important;
    height: calc(100vh - 220px);
    overflow: hidden;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      display: block;
      width: 5px;
      background: #2d54b8;
      height: 100%;
      border-radius: 4px 0 0 4px;
    }

    & > li {
      height: 50px;
      line-height: 50px;
      list-style: none;
      padding-left: 20px;

      p {
        margin: 0;
        border-bottom: 1px solid #dcdfe6;
      }
    }

    & > li.active {
      color: #2d54b8;
      background: #eaeef8;

      p {
        border-bottom: none;
      }
    }
  }

  &__container {
    width: 890px;
    background: #eff1f4;
    border-radius: 4px;
    overflow: auto;
    border: 1px solid #dcdfe6;
    height: calc(100vh - 220px);

    &-title {
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      font-size: 14px;
      color: rgb(142, 142, 142);
      border-bottom: 1px solid #dcdfe6;

      span {
        margin-right: 20px;
      }
    }

    &-content {
      width: 490px;
      margin: auto;
      overflow: auto;

      &-day {
        height: 40px;
        line-height: 35px;
        padding: 5px 10px;
        background: white;
        margin: 4px 0;
      }

      &-line {
        height: 270px;
        background: white;
      }

      &-table {
        background: white;
        margin-top: 4px;

        & > .title {
          font-size: 18px;
          font-weight: 700;
          text-align: center;
          padding: 10px 0;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.statistics-manage {
  .el-input__inner {
    font-size: 16px;
    height: 30px;
    line-height: 30px;
  }
  ::placeholder {
    font-size: 14px;
    color: #c0c4cc;
  }

  .el-input__icon {
    line-height: 30px;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 190px;
  }

  .el-table th {
    padding: 0;
    height: 30px;
    background: rgb(81, 175, 190);
    color: white;
  }
  .el-table td {
    height: 30px;
    padding: 0;
    /*background: rgb(244, 251, 252);*/
    background: rgb(211, 238, 242) !important;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: rgb(244, 251, 252) !important;
  }
}
</style>
